<template>
  <div :class="voteMb == 3 ? 'mb3-index-bgColor' : ''">
    <div class="c-p" v-if="(isDisplay == 1 && (info.isSelf == 1 || info.status == 1)) || fromPage == 2">
      <div :class="fromPage == 2 ? '' : 'c-pb100'">
        <!-- 选手详情头部 -->
        <div class="c-p c-w100 hh324" v-if="fromPage != 2">
          <div class="hh324 c-text-hidden">
            <img src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/voting/mb3bg.png" alt="" class="c-w100" v-if="voteMb == 3">
            <div class="c-w100"
              :style="{backgroundImage:'url(' + coverImg + ')', backgroundSize:'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center center', filter: 'blur(0.1rem)', minHeight: '8.1rem' }"
              v-if="voteMb != 3"></div>
            <div class="c-w100 hh324 msk-bg c-pa c-p-t0" v-if="voteMb != 3"></div>
            <div class="c-pa c-p-r0 c-p-t40 c-fs22 c-fc-white c-pl20 c-pr16 c-pz99"
              :class="voteMb == 2 ? 'mb2-detail-bg c-hh68' : voteMb == 3 ? 'mb3-detail-bg c-hh48 c-pt8' : 'activities-class c-pv12'" @click="goToIndex">活动首页</div>
          </div>
          <div class="c-pa c-p-t32 c-w100">
            <div class="c-w100 c-text-hidden">
              <img :src="$addXossFilter(coverImg, require('@/assets/defult_head.png'))" alt="" class="c-brp50 activit-img c-m-0auto" />
            </div>
            <div class="c-textAlign-c c-w100 mt-09" v-if="playerStatus != 0">
              <img :src="voteMb == 2 ? require('../../../assets/i/wap/voting/mb2Head.png') : require('@/assets/i/wap/voting/headeBot.png')" alt="" class="ww168 c-m-0auto">
              <span class="c-fs20 no-fc c-p pt-no">NO.{{rankNum}}</span>
            </div>
            <div class="c-w100" :class="playerStatus == 0 ? 'c-mt20' : 'mt-06'">
              <div class="c-fs24 c-fc-white c-textAlign-c">{{info.name}}</div>
              <div class="c-fs20 c-fc-white c-textAlign-c c-mt12" v-if="info.number">{{info.number}}号</div>
            </div>
          </div>
          <div class="c-ph24 c-pa c-w100" :class="voteMb == 2 ? 'c-p-bm-80' : 'pab48'">
            <div class="c-flex-row c-justify-sb c-fs20" :class="voteMb == 2 ? 'mb2-top-bg c-fc-white c-hh120 c-pt18 c-pb64' : 'c-pv24 c-fc-sblack c-bg-white c-box-shadow5 c-br40'">
              <div class="c-textAlign-c c-flex-grow1 c-bd-r1-ccc c-w50">当前{{playerVoteNum}}票</div>
              <div class="c-flex-grow1 c-textAlign-c c-w50">{{playerStatus == 0 ? '暂未参赛' : rankNum == 1 ? '当前第一名' : '与上一名差：' + littleNum + '票'}}</div>
            </div>
          </div>
        </div>
        <!-- 活动详情头部 -->
        <div v-if="fromPage == 2">
          <div class="c-w100 c-p">
            <img v-if="info.name" :src="$addXossFilter(coverImg, require('@/assets/activity_defult.png'))" class="c-w100 maxh340" />
            <div v-else class="c-w100 c-hh340"></div>
            <div class="c-pa c-p-r0 c-p-t40 c-fs22 c-fc-white c-pl20 c-pr16 c-pz99"
              :class="voteMb == 2 ? 'mb2-detail-bg c-hh68' : voteMb == 3 ? 'mb3-detail-bg c-hh48 c-pt8' :  'activities-class c-pv12'" @click="goToIndex">活动首页</div>
          </div>
          <div class="c-ph24 c-p" :class="voteMb == 3 ? 'mb3-index-bgColor' : ''">
            <div class="c-fs28 c-pt32 c-fw-b" :class="voteMb == 3 ? 'c-fc-white' : 'c-fc-xblack'">{{info.name}}</div>
            <div class="c-pt20 c-fs24" :class="voteMb == 3 ? 'c-fc-white' : 'c-fc-gray'">比赛时间：{{info.startAt}} — {{info.endAt}}</div>
            <div class="c-pv20 c-fs24" :class="voteMb == 3 ? 'c-fc-white' : 'c-fc-gray'">报名时间：{{info.enrollStartAt}} — {{info.enrollEndAt}}</div>
            <div class="c-fs24" :class="voteMb == 3 ? 'c-fc-white' : 'c-fc-gray'">{{voteCustomName}}规则：每个微信号{{info.voteType == 1 ? '活动期间' : '每日'}}可投{{info.voteNum}}次</div>
          </div>
        </div>
        <!-- 详情 -->
        <div class="c-pb30" :class="voteMb == 2 ? fromPage != 2 ? 'c-mt60 c-p c-ph6' : 'c-mt48 c-p c-ph6' : voteMb == 3 ? fromPage != 2 ? 'c-pt60 c-p c-ph12' : 'c-pt48 c-p c-ph12 mt-01' : ''">
          <img src="../../../assets/i/wap/voting/bgTop.png" alt="" v-if="voteMb == 2">
          <div class="c-ph30 c-p" :class="voteMb == 1 ? fromPage != 2 ? 'c-mt80' : 'c-mt48' : voteMb == 2 ? 'mb2-center-bg c-pb36' : voteMb == 3 ? 'c-bg-white c-br16 c-pb30 minh560' : ''">
            <div class="c-ww100 c-hh100 c-pa c-p-tm8 c-p-r32" v-if="playerStatus == -1"><img src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/voting/playerFail.png" alt=""></div>
            <div class="c-flex-row c-justify-center" :class="voteMb == 3 ? 'c-pt30' : ''">
              <div class="c-fc-sgray c-fw-b c-fs20 c-lh34" v-if="voteMb == 1">//</div>
              <div class="c-fs24 c-fw-b " :class="voteMb == 2 ? 'mb2Title c-pa c-fc-white c-textAlign-c' : voteMb == 3 ? 'mb3-index-bgColor c-br40 c-ph32 c-pv4 c-fc-white c-textAlign-c' : 'c-pl26'">
                {{fromPage == 2 ? '活动详情' : '选手简介'}}</div>
              <div class="c-fc-sgray c-fw-b c-fs20 c-pl26 c-lh34" v-if="voteMb == 1">//</div>
            </div>
            <div v-html="info.introduce" class="c-fs24 c-fc-sblack c-pv20" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-if="fromPage == 2"></div>
            <div class="c-pv20 c-lh40 c-fc-sblack c-fs24" v-if="fromPage != 2" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="introduce"></div>
            <div v-if="fromPage != 2 && voteMb != 2" class="c-flex-row c-justify-center c-pb32">
              <div class="c-fc-sgray c-fw-b c-fs20 c-lh34" v-if="voteMb == 1">//</div>
              <div class="c-fs24 c-fw-b " :class="voteMb == 2 ? 'mb2Title c-pa c-fc-white c-textAlign-c' : voteMb == 3 ? 'mb3-index-bgColor c-br40 c-ph32 c-pv4 c-fc-white c-textAlign-c' : 'c-pl26'">
                选手作品</div>
              <div class="c-fc-sgray c-fw-b c-fs20 c-pl26 c-lh34" v-if="voteMb == 1">//</div>
            </div>
            <div v-if="fromPage != 2 && voteMb != 2">
              <div v-html="article" class="c-fs24 c-fc-sblack c-ws-pw c-mb24"></div>
              <!-- 图片回答 -->
              <div v-for="(item, index) in imgList" :key="index" class="c-mb24">
                <img :src="$addXossFilter(item, require('@/assets/defult270.png'))" alt="" class="c-w100" @click="clickPreviewImage(item)" />
              </div>
              <!-- 视频回答 -->
              <div class="c-w100 c-flex-column" v-if="showVideoImg">
                <div class="c-w100 c-br10 c-p c-bg-black" v-if="!showMyVideo" @click="clickPlayVideo">
                  <img class="c-br10 c-hh320 c-m-0auto" :src="$addXossFilter(info.video.videoLogo, 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png')" alt="" />
                  <div class="c-pa c-w100 c-p-t0 c-p-b0 c-flex-center c-flex-column">
                    <img src="../../../assets/i/wap/live/img_play_btn.png" alt="" class="c-m-0auto c-ww80">
                  </div>
                </div>
                <div id="myVideo" class="c-w100-im" style="width:100%;height:auto;"></div>
              </div>
              <!-- 语音回答 -->
              <div class="c-mt56" v-if="info.audio && info.audioType != -1">
                <voice-player :playAduioSrc="playAduioSrc" :allTime="allTime"></voice-player>
              </div>
            </div>
          </div>
          <div class="c-pa bottomBg" v-if="voteMb == 2">
            <img src="../../../assets/i/wap/voting/bgBottom.png" alt="">
          </div>
        </div>
        <template v-if="fromPage != 2 && voteMb == 2">
          <div class="c-pb30 c-mt32 c-p c-ph6">
            <img src="../../../assets/i/wap/voting/bgTop.png" alt="">
            <div class="c-ph30 c-p mb2-center-bg c-pb36">
              <div class="c-ww100 c-hh100 c-pa c-p-tm8 c-p-r32" v-if="playerStatus == -1"><img src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/voting/playerFail.png" alt=""></div>
              <div class="c-flex-row c-justify-center">
                <div class="c-fs24 c-fw-b mb2Title c-pa c-fc-white c-textAlign-c">选手作品</div>
              </div>
              <div class="c-pt24">
                <div v-html="article" class="c-fs24 c-fc-sblack c-ws-pw c-mb24"></div>
                <!-- 图片回答 -->
                <div v-for="(item, index) in imgList" :key="index" class="c-mb24">
                  <img :src="$addXossFilter(item, require('@/assets/defult270.png'))" alt="" class="c-w100" @click="clickPreviewImage(item)" />
                </div>
                <!-- 视频回答 -->
                <div class="c-w100 c-flex-column" v-if="showVideoImg">
                  <div class="c-w100 c-br10 c-p c-bg-black" v-if="!showMyVideo" @click="clickPlayVideo">
                    <img class="c-br10 c-hh320 c-m-0auto" :src="$addXossFilter(info.video.videoLogo, 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png')" alt="" />
                    <div class="c-pa c-w100 c-p-t0 c-p-b0 c-flex-center c-flex-column">
                      <img src="../../../assets/i/wap/live/img_play_btn.png" alt="" class="c-m-0auto c-ww80">
                    </div>
                  </div>
                  <div id="myVideo" class="c-w100-im" style="width:100%;height:auto;"></div>
                </div>
                <!-- 语音回答 -->
                <div class="c-mt56" v-if="info.audio && info.audioType != -1">
                  <voice-player :playAduioSrc="playAduioSrc" :allTime="allTime"></voice-player>
                </div>
              </div>
            </div>
            <div class="c-pa bottomBg">
              <img src="../../../assets/i/wap/voting/bgBottom.png" alt="">
            </div>
          </div>
        </template>
      </div>
      <div class="c-pf c-p-b0 c-fs28 c-pz10 c-w100 c-maxw640" v-if="fromPage != 2">
        <div class="c-fs20 c-fc-white c-w100 c-pv15 c-textAlign-c c-bg-pink" v-if="info.activityStatus == 3">活动未开始</div>
        <div class="c-fs20 c-fc-white c-w100 c-pv15 c-textAlign-c c-bg-pink" v-if="playerStatus == -1">审核失败：{{info.refuseReason}}</div>
        <div class="c-hh100 c-bg-white c-flex-row c-aligni-center" :class="voteMb == 2 ? '' : 'c-box-shadow4'">
          <div class="c-fc-smblue c-textAlign-c c-w100" :class="voteMb == 2 ? 'but-bg2 bg-size40 c-fc-white c-hh80 c-lh80' : voteMb == 3 ? 'c-hh80 c-lh80 but-bg3 fc844813 bg-size40' : 'theme-fc'"
            v-if="playerStatus == -1" @click="goToSingUp">重新报名</div>
          <div class="c-flex-row c-justify-sb c-aligni-center c-fc-sgray c-fs28 c-ph24 c-w100" v-if="playerStatus == 0">
            <span>报名审核中</span>
            <span class="theme-fc c-text-decoration-underline" @click="editInfo">编辑报名信息</span>
          </div>
          <div class="c-flex-row c-aligni-center c-justify-sa c-w100 c-h" v-if="playerStatus == 1" :class="enableGift == 2 && voteMb == 2 ? 'c-fs24' : 'c-fs28'">
            <div class="c-flex-grow1 c-w0 flex-basis c-flex-row c-flex-center"
              :class="[voteMb == 2 ? 'but-bg2 c-fc-white c-hh80 c-pt20 c-pb30' : voteMb == 3 ? 'but-bg3 fc844813 c-hh80 c-lh80' : 'theme-fc c-bd-r1-mgray', voteMb == 1 ? '' : enableGift == 2 ? 'bg-size95' : 'bg-size']" @click="clickVote">{{voteCustomName.length > 4 ? `${voteCustomName.substr(0, 4)}...` : voteCustomName}}</div>
            <div class="c-flex-grow1 c-w0 flex-basis c-flex-row c-flex-center" :class="[voteMb == 2 ? 'but-bg2 c-fc-white c-hh80 c-pt20 c-pb30' : voteMb == 3 ? 'but-bg3 fc844813 c-hh80 c-lh80' : 'theme-fc', voteMb == 1 ? '' : enableGift == 2 ? 'bg-size95' : 'bg-size']"
              @click="clickShowVote">为我拉票</div>
            <div v-if="enableGift == 2" class="c-flex-grow1 c-w0 flex-basis c-flex-row c-flex-center" :class="[voteMb == 2 ? 'but-bg2 c-fc-white c-hh80 c-pt20 c-pb30' : voteMb == 3 ? 'but-bg3 fc844813 c-hh80 c-lh80' : 'c-bd-l1-mgray theme-fc', voteMb == 1 ? '' : enableGift == 2 ? 'bg-size95' : 'bg-size']"
              @click="clickGivePresent">赠送礼物</div>
          </div>
        </div>
      </div>
      <!-- 为我拉票 -->
      <div class="c-pf c-w100 c-h c-p-t0 c-pz1003" :class="showVote ? '' : 'c-p-l999999'">
        <div class="p-timg" @click="closeModal" v-show="showVote"></div>
        <div class="c-pf c-w100 c-ph30" :style="{top: this.mtH + 'px'}" @touchstart.stop="touchStart" @touchend="touchEnd">
          <img class="app-save-img c-m-0auto" id="voteImg" alt="" />
        </div>
      </div>
      <offical-account :showAccountQcode="showAccountQcode" :desc="descAccount" :imgSrc="mpQrcodeImg" @hideDialog="hideDialog"></offical-account>
    </div>
    <div v-if="fromPage != 2 && ((info.isSelf == 0 && info.status != 1) || isDisplay == 2)" class="c-mt80">
      <img src="../../../assets/i/wap/voting/noData.png" alt="" class="c-m-0auto c-ww240 c-hh170">
      <div class="c-textAlign-c c-fs24 c-fc-sblack c-mt20">暂无详情</div>
    </div>
    <captcha-pop :showCaptcha="showCaptcha" @hidCaptcha="hidCaptcha" @clickConfirm="clickConfirm"></captcha-pop>
    <div v-if="isShowVipTip">
      <div class="masker" @click="isShowVipTip = false"></div>
      <div class="box c-textAlign-c c-pf c-p-tp50 c-p-tl50 c-translate-xy-50 c-pz1000">
        <div class="c-w100 boxContent c-bg-white c-pv56 c-br20">
          <img src="../../../assets/i/wap/voting/upgradeVip.png" alt="" class="c-ww180 c-mlr-auto">
          <div class="c-fs28 c-fc-sblack c-mt48">只有会员才能进行{{voteCustomName}}</div>
          <div class="c-fc-white theme-bg-gradient c-br28 c-ww220 c-hh56 c-lh56 c-mt40 c-fs24 c-mlr-auto" @click="goVipUp">购买会员</div>
        </div>
        <div class="iconfont c-mt40 c-fc-white c-fs50" @click="isShowVipTip = false">&#xe84e;</div>
      </div>
    </div>
    <reword-teacher-com :rewardType="'2'" :rewardGifts="rewardGifts" :showRewordModal.sync="showRewordModal" :modalType="2" :playId = "playerId" :voteId = "voteId" @reGetData= "reGetData" @freeSuccessTip = "freeSuccessTip"></reword-teacher-com>
  </div>
</template>

<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
import voicePlayer from "@/components/templates/common/audio/voicePlayer.vue"
import { getXgplayer } from "@/utils/xgplayerJs.js";
import captchaPop from "@/components/templates/common/captchaPop.vue"
import officalAccount from '@/components/templates/common/officalAccount';
import rewordTeacherCom from "@/components/templates/live/rewordTeacherCom.vue";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
let bgImgUrl = "https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/voting/3.png"
let bgImgUrl3 = "https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/voting/2.png"
let bgImgUrl2 = "https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/voting/replace1.png"
let isLoading = false
let player = null;
let curScollTop = 0;
export default {
  name: "contestantDetail",
  components: {
    captchaPop,
    voicePlayer,
    officalAccount,
    rewordTeacherCom
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      voteCustomName: localStorage.getItem("voteCustomName"),
      cfg: JSON.parse(localStorage.getItem("cfg")),
      playAduioSrc: null,
      allTime: '',
      playerVoteNum: 0,
      rankNum: 0,
      littleNum: 0,
      showVote: false,
      coverImg: '',
      playVideoMp4Src: '',
      playVideoM3Src: '',
      imgList: [],
      playerId: '',
      fromPage: 0,
      voteId: 0,
      info: {},
      isDisplay: 0,
      hasNum: 0,
      showVideo: false,
      showVideoImg: false,
      showCaptcha: false, //验证码弹窗
      playerIndexId: 0,
      showMyVideo: false,
      mtH: 0,
      touchTime: 0, //触摸二维码时间戳
      onLine: true,
      touchEndTime: 0, //手指触摸拉票图时间
      isTouchEnd: false,
      showAccountQcode: false, //显示关注公众号二维码
      mpQrcodeImg: '', //关注二维码
      playerStatus: 0, // 选手状态 -1已拒绝 0待审核 1已通过
      sharePosterType: 1, //拉票海报类型
      sharePosterText: {}, //分享文案
      sharePosterImg: '', //拉票背景图
      voteMb: 1, //模板 1.默认
      isVote: false,
      introduce: '', //详情
      isShowVipTip: false, //是否显示购买会员提示
      showRewordModal: false, //礼物弹窗
      rewardGifts: [],
      enableGift: 0,
      bindPhoneSetting: null,
      article: ''
    }
  },
  created() {
    utilJs.appShare(this);
  },
  computed: {
    descAccount() {
      let descAccount = this.isVote ? `关注公众号后可参与${this.voteCustomName}` : '关注公众号后可报名参赛';
      return descAccount;
    }
  },
  mounted() {
    window.addEventListener('online', this.lineStatus); // 离线到上线
    window.addEventListener('offline', this.lineStatus); // 上线到离线
  },
  activated() {
    // 初始化页面数据
    this.fromPage = this.$route.query.fromPage || 0
    player = null
    // 语音
    this.playAduioSrc = null
    this.playVideoM3Src = ''
    // 语音时长
    this.allTime = 0
    // 票数
    this.playerVoteNum = 0
    // 名次
    this.rankNum = 0
    // 与上一名差距
    this.littleNum = 0
    // 为我拉票
    this.showVote = false
    this.coverImg = ''
    this.playVideoMp4Src = ''
    this.imgList = []
    this.info = {}
    // 网络
    this.onLine = true
    this.playerStatus = 0
    // 是否显示活动详情
    this.isDisplay = 0
    this.playerIndexId = 0
    this.hasNum = 0
    this.showCaptcha = false
    this.showVideoImg = false
    this.showMyVideo = false
    this.touchTime = 0
    this.isTouchEnd = false
    this.enableGift = 0
    this.touchEndTime = 0
    this.showAccountQcode = false
    this.isShowVipTip = false
    this.mpQrcodeImg = ''
    this.sharePosterType = 2
    this.sharePosterText = {}
    this.rewardGifts = []
    this.sharePosterImg = bgImgUrl
    this.isVote = false
    this.showRewordModal = false
    this.introduce = ''
    this.article = '';
    this.voteMb = localStorage.getItem('voteMb') ? localStorage.getItem('voteMb') : 1
    getBindPhoneSetting(130).then(res => {
      this.bindPhoneSetting = res;
    });
    if (this.fromPage == 2) {
      setDocumentTitle("活动介绍")
      this.voteId = this.$route.query.voteId || 0 //活动id
      this.activityDetail()
    } else {
      setDocumentTitle("选手详情")
      this.playerId = this.$route.query.id || 0 //选手id
      this.getEnroll()
    }
    utilJs.toPageScrollTop()
    console.log(player)
  },
  deactivated() {
    //'@/assets/i/wap/voting/qrcodeImg.png'
  },
  watch: {
    showVote(val) {
      if (val) {
        //开启弹窗时记录当前滚动距离
        curScollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        document.querySelector("body").classList.add("open-disabled-scroll");
      } else {
        document.querySelector("body").classList.remove("open-disabled-scroll");
        //关闭弹窗，恢复滚动位置
        window.scrollTo(0, curScollTop);
      }
    }
  },
  methods: {
    hideDialog() {
      this.showAccountQcode = false;
      this.getEnroll()
    },
    //隐藏验证码输入框
    hidCaptcha() {
      this.showCaptcha = false
      isLoading = false
    },
    // 触摸拉票图片
    touchStart() {
      //var that = this;
      this.touchTime = new Date().getTime();
    },
    // 触离拉票图片
    touchEnd() {
      //clearTimeout(this.touchTime);
      this.touchEndTime = new Date().getTime() - this.touchTime
      if (this.touchEndTime < 500) {
        this.closeModal()
        if (this.touchEndTime > 0) {
          this.isTouchEnd = true
        }
      } else {
        this.touchEndTime = 0
      }
    },
    //断网监听
    lineStatus(aaa) {
      this.onLine = navigator.onLine
    },
    // 获取选手详情
    getEnroll() {
      let url = `${global.apiurl}activity/vote/getEnroll/${this.playerId}`
      utilJs.getMethod(url, (res) => {
        //setDocumentTitle(res.name)
        this.info = res
        let content1 = res.introduce
        let content = content1.replace(/ /g, '&nbsp;')
        this.introduce = content.replace(/\n/g, "<br />");
        this.voteMb = res.templateType ? res.templateType : 1
        localStorage.setItem('voteMb', this.voteMb)
        this.mpQrcodeImg = res.qrCode.qrcode
        this.playerVoteNum = res.playerVoteNum
        this.rankNum = res.rankNum
        this.littleNum = res.littleNum
        this.hasNum = res.hasNum
        this.voteId = res.actId
        this.coverImg = res.source == 1 ? res.images[0] : res.headimgurl
        this.imgList = res.images
        this.playerStatus = res.status
        this.isDisplay = res.isDisplay
        this.enableGift = res.enableGift
        this.allTime = res.audio ? res.audio.duration : 0
        this.playAduioSrc = res.audio ? res.audio.audioUrl ? res.audio.audioUrl : res.audio.audioM3u8 ? res.audio.audioM3u8 : res.audio.audioM4a : null
        this.sharePosterType = res.sharePosterType == 1 ? res.sharePoster : res.sharePosterType == 2 ? 4 : 1
        this.sharePosterImg = this.sharePosterType == 2 ? bgImgUrl2 : this.sharePosterType == 3 ? bgImgUrl3 : this.sharePosterType == 4 ? res.sharePosterImg : bgImgUrl
        this.sharePosterText = {
          qCodeText: res.sharePosterWords ? res.sharePosterWords : `快来帮我${this.voteCustomName}吧`, //拉票二维码文案
          shareTitle: res.shareTitle ? res.shareTitle : "", // 分享标题
          shareWords: res.shareWords ? res.shareWords : '', //分享文案
          shareImg: res.shareImg ? res.shareImg : this.coverImg // 分享图
        }
        if (res.video && (res.video.videoMp4 || res.video.convertM3u8) && res.videoType != -1) {
          this.playVideoMp4Src = res.video.videoMp4 ? res.video.videoMp4 : res.video.convertM3u8
          this.showVideoImg = true
        }
        if (res.textualWork && JSON.stringify(res.textualWork) != '[]' && res.textType != -1) {
          utilJs.getPageHtml(res.textualWork[0].content, sres => {
            this.article = sres;
          }, () => {
            this.article = '';
          });
        }
        //var clientWidth = document.documentElement.clientWidth
        this.wechatShare()
        //canvansWidth = clientWidth;
        this.drawVoteImg()
      }, err => {
        console.log(err)
        this.isDisplay = 2
      })
    },
    // 获取活动详情
    activityDetail() {
      let url = `${global.apiurl}activity/vote/activityDetail/${this.voteId}?type=1`
      utilJs.getMethod(url, (res) => {
        //setDocumentTitle(res.name)
        this.coverImg = res.cover
        this.info = res
        let startTime = this.info.startAt.replace(/-/g, "/").split(':')
        let endTime = this.info.endAt.replace(/-/g, "/").split(':')
        let enrollStartTime = this.info.enrollStartAt.replace(/-/g, "/").split(':')
        let enrollEndTime = this.info.enrollEndAt.replace(/-/g, "/").split(':')
        this.info.startAt = startTime[0] + ':' + startTime[1]
        this.info.endAt = endTime[0] + ':' + endTime[1]
        this.info.enrollStartAt = enrollStartTime[0] + ':' + enrollStartTime[1]
        this.info.enrollEndAt = enrollEndTime[0] + ':' + enrollEndTime[1]
        this.wechatShare()
      })
    },
    // 验证码投票确定
    clickConfirm(code) {
      let url = `${global.apiurl}activity/vote/clickVote/${this.playerId}?actId=${this.voteId}&captcha=${code.captcha}&captchaKey=${code.captchaKey}`
      this.votePlayer(url)
    },
    //点击投票
    clickVote(indexId, hasNum) {
      if (this.info.activityStatus != 2) {
        let text = this.info.activityStatus == 3 ? '活动未开始' : '活动已结束'
        this.$showCjToast({
          text: text,
          type: "warn",
          time: 1500,
        });
        return
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.enrollBind) {
        if (utilJs.goBindMobile()) return;
      }
      if (this.info.isVipVote && this.info.vipType.vipType == 1) {
        this.isShowVipTip = true;
        return;
      }
      if (this.info.isAttensionVote == 1 && !this.info.isSubscribe) { //关注公众号投票
        this.isVote = true
        this.showAccountQcode = true
        return
      }
      if (this.hasNum == 0 || !this.onLine) {
        let text = this.hasNum == 0 ? `,您的${this.voteCustomName}次数已用完` : '';
        this.$showCjToast({
          text: `${this.voteCustomName}失败${text}`,
          type: "warn",
          time: 1500,
        });
        return
      }
      if (this.info.isCaptchaVote == 1) {
        if (isLoading) {
          return
        }
        isLoading = true
        this.showCaptcha = true
        this.playerIndexId = indexId
      } else {
        let url = `${global.apiurl}activity/vote/clickVote/${this.playerId}?actId=${this.voteId}`
        this.votePlayer(url)
      }
    },
    // 投票
    votePlayer(url) {
      utilJs.getMethod(url, (res) => {
        this.hasNum = res.hasNum
        this.littleNum = res.littleNum
        this.rankNum = res.rankNum
        this.playerVoteNum = res.playerVoteNum
        let text = `您当前还剩下${this.hasNum}次${this.voteCustomName}机会`
        this.$showCjToast({
          text: `${this.voteCustomName}成功,${text}`,
          type: "success",
          time: 1500,
        });
        this.showCaptcha = false
        isLoading = false
      }, err => {
        console.log(err)
        this.showCaptcha = false
        isLoading = false
      })
    },
    // 点击为我拉票
    clickShowVote() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.showVote = true
    },
    getGoodsInfoSet() {
      utilJs.getMethod(`${global.apiurl}activity/vote/getVoteConf?actId=${this.voteId}`, res => {
        this.rewardGifts = res;
      });
    },
    clickGivePresent() {
      if (this.info.activityStatus != 2) {
        let text = this.info.activityStatus == 3 ? '活动未开始' : '活动已结束'
        this.$showCjToast({
          text: text,
          type: "warn",
          time: 1500,
        });
        return
      }
      if (this.info.isStop == 1) {
        this.$showCjToast({
          text: "活动暂停",
          type: "warn",
          time: 1500,
        });
        return
      }
      this.getGoodsInfoSet();
      this.showRewordModal = true;
    },
    closeModal() {
      this.showVote = false
    },
    // 重新报名
    goToSingUp() {
      let type = this.info.upgradeMemberJump == 2 ? 23 : ''
      if (this.info.isAttensionAccount == 1 && !this.info.isSubscribe) {
        this.isVote = false
        this.showAccountQcode = true
        return
      }
      if (this.info.isVipEnroll == 1 && this.info.vipType.vipType == 1) {
        this.$cjConfirm({
          title: '提示',
          message: '该活动为会员专属，成为会员后可参与报名活动',
          confirmButtonText:'查看会员购买',
          onConfirm:() => {
              this.$routerGo(this, "push", {
                path: '/member/vip/vipUp',
                query: {
                  type
                }
              })
            }
        })
        return
      }
      this.$routerGo(this, "push", {
        path: "/homePage/voting/playerSingUp",
        query: {
          fromPage: 2,
          id: this.voteId,
          playerId: this.playerId
          //refereeId: localStorage.getItem("userId")
        }
      });
    },
    editInfo() {
      this.$routerGo(this, "push", {
        path: '/homePage/voting/playerSingUp',
        query: {
          fromPage: 3,
          id: this.voteId,
          playerId: this.playerId,
        }
      })
    },
    // 点击播放视频
    clickPlayVideo() {
      if (this.touchEndTime > 0 && this.isTouchEnd) {
        this.touchEndTime = 0
        this.isTouchEnd = false
        return
      }
      this.initTcPlayer(this.playVideoMp4Src)
    },
    //初始化腾讯视频播放器
    initTcPlayer(mp4Url, m3u8Url) {
      if (mp4Url == "" || mp4Url == null) {
        mp4Url = m3u8Url ? m3u8Url : "";
      }
      if (m3u8Url == "" || m3u8Url == null) {
        m3u8Url = mp4Url ? mp4Url : "";
      }
      let videoObj = {
        videoMp4: mp4Url,
        videoM3U8: m3u8Url,
        autoplay: true,
        fluid: false,
        isCssFullScreen: true,
        poster: require("../../../../public/i/wap/index/poster.png")
      };
      player = getXgplayer("myVideo", videoObj);
      this.showMyVideo = true
    },
    // 返回首页
    goToIndex() {
      this.$routerGo(this, "push", {
        path: "/homePage/voting/votingActivity",
        query: {
          id: this.voteId,
          //refereeId: localStorage.getItem("userId")
        }
      });
    },
    //点击图片放大预览
    clickPreviewImage(imgUrl) {
      if (!imgUrl || (this.touchEndTime > 0 && this.isTouchEnd)) {
        this.touchEndTime = 0
        this.isTouchEnd = false
        return;
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: this.imgList // 需要预览的图片http链接列表
      });
    },
    // 绘制拉票名片
    drawVoteImg() {
      let that = this
      // 二维码
      let drawInfo = this.info.qrcodeImg;
      // 头像
      let headImg = this.coverImg
      // 用户名
      let name = this.info.name
      // 编号
      let playerNumbner = this.info.number + '号'
      // 简介
      let text = this.info.introduce
      // 活动标题
      let activityName = this.info.activityName
      // 活动时间
      let startTime = this.info.startAt.replace(/-/g, "/").split(':')
      let endTime = this.info.endAt.replace(/-/g, "/").split(':')
      let startAt = '开始时间：' + startTime[0] + ':' + startTime[1]
      let endAt = '结束时间：' + endTime[0] + ':' + endTime[1]
      let c = document.createElement("canvas");
      let widebandRatio = window.devicePixelRatio;
      let heightRatio = widebandRatio * 1.65;
      c.width = widebandRatio * 580;
      c.height = heightRatio * 580;
      let ctx = c.getContext("2d");
      ctx.save();
      // 背景模板
      //let mbBgImg = this.sharePosterType == 2 ? bgImgUrl2 : this.sharePosterType == 3 ? bgImgUrl3 : bgImgUrl
      let mbHeight = this.sharePosterType == 2 ? widebandRatio * 40 : this.sharePosterType == 3 ? widebandRatio * 20 : 0
      //二维码文案
      let qCodeTextWidth = 0
      if (ctx.measureText(this.sharePosterText.qCodeText).width > 80) {
        qCodeTextWidth = ((ctx.measureText(this.sharePosterText.qCodeText).width) * widebandRatio) / 2
      }
      //if (qCodeTextWidth)
      this.downLoadImg(that.sharePosterImg).then(bgImg => {
        // 背景
        ctx.drawImage(bgImg, 0, 0, widebandRatio * 580, that.sharePosterType == 4 ? heightRatio * 480 : heightRatio * 580);
        if (that.sharePosterType == 4) { //自定义模板底部矩形
          //ctx.beginPath()
          //ctx.lineWidth = "6"
          ctx.fillStyle = "#ffffff"
          ctx.fillRect(0, heightRatio * 480, widebandRatio * 580, heightRatio * 100)
          //ctx.rect(0, heightRatio * 480, widebandRatio * 580, heightRatio * 100)
          ctx.stroke()
        }
        ctx.save();
        return that.downLoadImg(drawInfo)
      }).then(drawQrcodeImg => {
        // 二维码
        let qCodeImgLeft = widebandRatio * 135 - qCodeTextWidth //二维码左距离
        let qCodeImgHeight = heightRatio * 510 //二维码顶部距离
        let shareTextLeft = widebandRatio * 260 - qCodeTextWidth //文案左距离
        let shareTextHeight = heightRatio * 528 //文案顶部距离
        let enterText = widebandRatio * 260 - qCodeTextWidth //长按文字左距离
        let enterTextHeight = heightRatio * 562 //长按文字顶部距离
        let codeTextColor = 'rgb(255,255,255)' //文字颜色
        if (that.sharePosterType == 3) { //模板三
          qCodeImgLeft = widebandRatio * 243
          qCodeImgHeight = heightRatio * 478
          shareTextLeft = widebandRatio * 368
          shareTextHeight = heightRatio * 496
          enterText = widebandRatio * 368
          enterTextHeight = heightRatio * 530
          codeTextColor = 'rgba(72,65,149,1)'
          if (ctx.measureText(that.sharePosterText.qCodeText).width > 75) { //文案过长换行
            let qCodeTextArr = that.sharePosterText.qCodeText.split('')
            let qCodeStr1 = ''
            let qCodeStr2 = ''
            for (let j = 0; j < qCodeTextArr.length; j++) {
              if (ctx.measureText(qCodeStr1).width > 70) {
                qCodeStr2 += qCodeTextArr[j]
              } else {
                qCodeStr1 += qCodeTextArr[j]
              }
            }
            ctx.font = 'bold ' + widebandRatio * 22 + 'px Microsoft YaHei';
            ctx.fillStyle = codeTextColor
            ctx.textAlign = 'letf'
            ctx.fillText(qCodeStr1, shareTextLeft, shareTextHeight, widebandRatio * 400, widebandRatio * 200)
            ctx.save();
            ctx.font = 'bold ' + widebandRatio * 22 + 'px Microsoft YaHei';
            ctx.fillStyle = codeTextColor
            ctx.textAlign = 'letf'
            ctx.fillText(qCodeStr2, shareTextLeft, shareTextHeight + heightRatio * 15, widebandRatio * 400, widebandRatio * 200)
            ctx.save();
          } else {
            ctx.font = 'bold ' + widebandRatio * 22 + 'px Microsoft YaHei';
            ctx.fillStyle = codeTextColor
            ctx.textAlign = 'letf'
            ctx.fillText(that.sharePosterText.qCodeText, shareTextLeft, shareTextHeight, widebandRatio * 400, widebandRatio * 200)
            ctx.save();
          }
        } else if (that.sharePosterType == 4) { //自定义
          qCodeImgLeft = widebandRatio * 20
          qCodeImgHeight = heightRatio * 487
          shareTextLeft = widebandRatio * 180
          shareTextHeight = heightRatio * 513
          enterText = widebandRatio * 180
          enterTextHeight = heightRatio * 560
          codeTextColor = 'rgba(0, 0, 0, 1)'
        }
        ctx.drawImage(drawQrcodeImg, qCodeImgLeft, qCodeImgHeight, that.sharePosterType == 4 ? widebandRatio * 150 : widebandRatio * 100, that.sharePosterType == 4 ? widebandRatio * 150 : widebandRatio * 100)
        drawQrcodeImg = null
        ctx.save()
        if (that.sharePosterType != 3) {
          ctx.font = 'bold ' + widebandRatio * 22 + 'px Microsoft YaHei';
          ctx.fillStyle = codeTextColor
          ctx.textAlign = 'letf'
          ctx.fillText(that.sharePosterText.qCodeText, shareTextLeft, shareTextHeight, widebandRatio * 400, widebandRatio * 200)
          ctx.save();
        }
        ctx.font = widebandRatio * 20 + 'px Microsoft YaHei';
        ctx.fillStyle = codeTextColor
        ctx.textAlign = 'left'
        ctx.fillText('长按二维码分享', enterText, enterTextHeight, widebandRatio * 400, widebandRatio * 200)
        ctx.save();
        return that.downLoadImg(headImg)
      }).then(bqImg => {
        // 头像
        // 模板3头像距离
        let mb3Height = that.sharePosterType == 3 ? heightRatio * 13 : that.sharePosterType == 2 ? 0 - heightRatio * 10 : that.sharePosterType == 4 ? heightRatio * 180 : 0
        let mb4WidthLeft = that.sharePosterType == 4 ? widebandRatio * 220 : 0
        let mb4NameLeft = that.sharePosterType == 4 ? widebandRatio * 106 : 0
        let mb4NameTop = that.sharePosterType == 4 ? heightRatio * 46 : 0
        ctx.save();
        ctx.beginPath();
        ctx.arc(290 * widebandRatio - mb4WidthLeft, heightRatio * 220 + mbHeight - mb3Height, widebandRatio * 40, 0, 2 * Math.PI);
        ctx.clip();
        ctx.fillStyle = "#ffffff";
        ctx.fill();
        ctx.restore();
        ctx.save();
        ctx.beginPath();
        ctx.arc(290 * widebandRatio - mb4WidthLeft, heightRatio * 220 + mbHeight - mb3Height, widebandRatio * 40, 0, 2 * Math.PI);
        ctx.clip();
        ctx.drawImage(bqImg, 250 * widebandRatio - mb4WidthLeft, heightRatio * 196 + mbHeight - mb3Height, widebandRatio * 80, widebandRatio * 80);
        ctx.restore();
        // 用户名字
        ctx.font = 'bold ' + widebandRatio * 22 + 'px Microsoft YaHei';
        ctx.fillStyle = that.sharePosterType == 4 ? '#ffffff' : 'rgba(0,0,0,1)'
        ctx.textAlign = 'center'
        let nameStr = ''
        name = name.split('')
        if (that.sharePosterType == 4) {
          mb4NameLeft = widebandRatio * 106 - ctx.measureText(name).width / widebandRatio
        }
        let nameLeft = widebandRatio * 260
        if ((ctx.measureText(name).width / widebandRatio) > widebandRatio * 60) {
          for (let i = 0; i < name.length; i++) {
            nameStr += name[i]
            if ((ctx.measureText(nameStr).width / widebandRatio) > widebandRatio * 60) {
              nameStr = nameStr + '...'
              break;
            }
          }
        } else {
          nameStr = name.join('')
        }
        let nameWidth = ctx.measureText(nameStr).width
        ctx.fillText(nameStr, nameLeft - mb4NameLeft, heightRatio * 270 + mbHeight - mb3Height - mb4NameTop, nameWidth * widebandRatio, widebandRatio * 50)
        ctx.save();
        // 用户编号
        let roundLeft = (nameWidth / widebandRatio) + widebandRatio * 276
        if (widebandRatio > 2.5) {
          if ((nameWidth / widebandRatio) > 80) {
            roundLeft = (nameWidth / widebandRatio) + widebandRatio * 294
          }
          if ((nameWidth / widebandRatio) > 140) {
            roundLeft = (nameWidth / widebandRatio) + widebandRatio * 300
          }
          if ((nameWidth / widebandRatio) > 180) {
            roundLeft = (nameWidth / widebandRatio) + widebandRatio * 308
          }
        }
        let numberWhite = ctx.measureText(playerNumbner).width + widebandRatio * 20
        that.fillRoundRect(ctx, roundLeft - mb4NameLeft, heightRatio * 258 + mbHeight - mb3Height - mb4NameTop, numberWhite, heightRatio * 16, widebandRatio * 12, 'rgba(255,217,58,1)');
        ctx.font = widebandRatio * 20 + 'px Microsoft YaHei';
        ctx.fillStyle = 'rgba(114,59,18,1)'
        roundLeft = playerNumbner.length > 6 ? roundLeft + widebandRatio * 60 : playerNumbner.length > 5 ? roundLeft + widebandRatio * 56 : playerNumbner.length > 4 ? roundLeft + widebandRatio * 48 : playerNumbner.length > 3 ? roundLeft + widebandRatio * 40 : playerNumbner.length > 2 ? roundLeft + widebandRatio * 32 : roundLeft + widebandRatio * 25
        ctx.fillText(playerNumbner, roundLeft - mb4NameLeft, heightRatio * 270 + mbHeight - mb3Height - mb4NameTop, numberWhite, heightRatio * 26)
        ctx.save();
        if (that.sharePosterType != 4) {
          // 简介
          ctx.font = widebandRatio * 21 + 'px Microsoft YaHei';
          ctx.fillStyle = 'rgba(102,102,102,1)'
          ctx.textAlign = 'center'
          let str = ''
          text = text.split('')
          if ((ctx.measureText(text).width / widebandRatio) > 300) {
            for (let i = 0; i < text.length; i++) {
              str += text[i]
              if ((ctx.measureText(str).width / widebandRatio) > 300) {
                str = str + '...'
                break;
              }
            }
          } else {
            str = text.join('')
          }
          ctx.fillText(str, widebandRatio * 286, heightRatio * 296 + mbHeight - mb3Height, widebandRatio * 500, widebandRatio * 30)
          ctx.save();
          // 作品名称
          ctx.font = 'bold ' + widebandRatio * 22 + 'px Microsoft YaHei';
          ctx.fillStyle = 'rgba(0,0,0,1)'
          ctx.textAlign = 'center'
          ctx.fillText(activityName, widebandRatio * 286, heightRatio * 390 + mbHeight, widebandRatio * 400, widebandRatio * 30)
          ctx.save();
          // 活动时间
          ctx.font = widebandRatio * 21 + 'px Microsoft YaHei';
          ctx.fillStyle = 'rgba(102,102,102,1)'
          ctx.textAlign = 'center'
          ctx.fillText(startAt, widebandRatio * 292, heightRatio * 416 + mbHeight, widebandRatio * 400, widebandRatio * 30)
          ctx.save();
          ctx.font = widebandRatio * 21 + 'px Microsoft YaHei';
          ctx.fillStyle = 'rgba(102,102,102,1)'
          ctx.textAlign = 'center'
          ctx.fillText(endAt, widebandRatio * 292, heightRatio * 439 + mbHeight, widebandRatio * 400, widebandRatio * 30)
          ctx.save();
        }
        this.convertCanvasToImage(ctx);
      })
    },
    fillRoundRect(cxt, x, y, width, height, radius, fillColor) {
      //圆的直径必然要小于矩形的宽高
      //if (2 * radius > width || 2 * radius > height) { return false; }
      cxt.save();
      cxt.translate(x, y);
      //绘制圆角矩形的各个边
      this.drawRoundRectPath(cxt, width, height, radius);
      cxt.fillStyle = fillColor || "#000"; //若是给定了值就用给定的值否则给予默认值
      cxt.fill();
      cxt.restore();
    },
    drawRoundRectPath(cxt, width, height, radius) {
      cxt.beginPath(0);
      //从右下角顺时针绘制，弧度从0到1/2PI
      cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
      //矩形下边线
      cxt.lineTo(radius, height);
      //左下角圆弧，弧度从1/2PI到PI
      cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
      //矩形左边线
      cxt.lineTo(0, radius);
      //左上角圆弧，弧度从PI到3/2PI
      cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
      //上边
      cxt.lineTo(width - radius, 0);
      //右上角圆弧
      cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
      //右边线
      cxt.lineTo(width, height - radius);
      cxt.closePath();
    },
    downLoadImg(imgUrl) {
      return new Promise(function (resolve, reject) {
        const CUR_TIMETAMP = new Date().getTime();
        let img = new Image();
        img.crossOrigin = 'anonymous';
        if (!imgUrl.includes('base64')) {
          img.src = imgUrl.includes('?') ? `${imgUrl}&t=${CUR_TIMETAMP}` : `${imgUrl}?t=${CUR_TIMETAMP}`;
        }
        img.onload = function () {
          resolve(img);
        };
        img.error = function (e) {
          reject(e);
        }
      })
    },
    convertCanvasToImage(ctx) {
      if (!document.getElementById('voteImg') || !ctx.canvas) {
        return;
      }
      try {
        var dataURL = ctx.canvas.toDataURL("image/jpeg");
        document.getElementById('voteImg').src = dataURL;
        document.getElementById('voteImg').onload = () => {
          this.mtH = (window.screen.height - document.getElementById('voteImg').offsetHeight) / 6
        }
        ctx = null;
      } catch (err) {
        let errorData = {
          errorEvent: JSON.stringify(err),
          errorType: 'SPREAD_CANVAS_TO_IMG',
        }
        utilJs.reprotError(errorData);
      }
    },
    goVipUp() {
      let type = this.info.upgradeMemberJump == 2 ? 23 : ''
      this.$routerGo(this, "push", {
        path: '/member/vip/vipUp',
        query: {
          type
        }
      })
    },
    reGetData() {
      this.getEnroll()
    },
    freeSuccessTip() {
      this.$showCjToast({
        text: "赠礼成功",
        type: "success",
        isShowMask: "true"
      });
    },
    //分享
    wechatShare: function () {
      //shareImg 分享图标
      //shareTitle 分享标题
      //shareWords 分享文案'
      let title = this.info.shareTitle ? this.info.shareTitle : this.fromPage == 2 ? `票选活动，火热进行中！` : `${this.voteCustomName}助力${this.info.number}号选手！感谢！`
      let shareUrl = this.fromPage == 2 ? `${window.location.href.split("#")[0]}#/homePage/voting/contestantDetail?fromPage=2&voteId=${this.voteId}&refereeId=${localStorage.getItem("userId")}` : `${window.location.href.split("#")[0]}#/homePage/voting/contestantDetail?fromPage=0&id=${this.playerId}&refereeId=${localStorage.getItem("userId")}`;
      let shareImg = this.info.shareImg ? this.info.shareImg : this.coverImg
      let shareDesc = this.info.shareWords ? this.info.shareWords : this.fromPage == 2 ? `点击查看，马上参与${this.info.name}` : `我正在参加${this.info.activityName}，快来为我助力吧~`
      utilJs.wechatConfig(
        shareUrl,
        title,
        shareImg,
        shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare: function () {
      let title = this.info.shareTitle ? this.info.shareTitle : this.fromPage == 2 ? `票选活动，火热进行中！` : `${this.voteCustomName}助力${this.info.number}号选手！感谢！`
      let shareUrl = this.fromPage == 2 ? `${window.location.href.split("#")[0]}#/homePage/voting/contestantDetail?fromPage=2&voteId=${this.voteId}&refereeId=${localStorage.getItem("userId")}` : `${window.location.href.split("#")[0]}#/homePage/voting/contestantDetail?fromPage=0&id=${this.playerId}&refereeId=${localStorage.getItem("userId")}`;
      let shareImg = this.info.shareImg ? this.info.shareImg : this.coverImg
      let shareDesc = this.info.shareWords ? this.info.shareWords : this.fromPage == 2 ? `点击查看，马上参与${this.info.name}` : `我正在参加${this.info.activityName}，快来为我助力吧~`
      let shareData = {
        title: title,
        shareImg: shareImg,
        shareUrl: shareUrl,
        shareDesc: shareDesc
      };
      utilJs.appShareTrue(
        shareData.title,
        shareData.shareImg,
        shareData.shareUrl,
        shareData.shareDesc
      );
    },
  }
}
</script>

<style scoped>
.activit-img {
  border: 0.1rem solid #fff;
  width: 3.15rem;
  height: 3.15rem;
}
.bg {
  background-size: cover;
  filter: blur(0.1rem);
  min-height: 8.1rem;
}
.no-fc {
  color: #723b12;
}
.pt-no {
  top: -1.18rem;
}
.pab48 {
  bottom: -1rem;
}
.activities-class {
  background: linear-gradient(to left, #008cff 0%, #4baeff 100%);
  border-radius: 1rem 0 0 1rem;
}
.hh324 {
  height: 8.1rem;
}
.ww168 {
  width: 4.2rem;
}
.vot-shaw {
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.05);
}
.p-timg {
  z-index: 1002;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.maxh340 {
  max-height: 8.5rem;
}
.mt-09 {
  margin-top: -0.9rem;
}
.mt-06 {
  margin-top: -0.6rem;
}
.msk-bg {
  background: rgba(0, 0, 0, 0.5);
}
.mb2-detail-bg {
  background-image: url("../../../assets/i/wap/voting/activityDetailBg.png");
  background-repeat: no-repeat;
  padding-top: 0.25rem;
  background-size: 100%;
}
.mb2-center-bg {
  background-image: url("../../../assets/i/wap/voting/bgCenter.png");
  background-size: 100%;
}
.mb2Title {
  background-image: url("../../../assets/i/wap/voting/mb2title.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  width: 5rem;
  height: 1.5rem;
  top: -1.25rem;
  line-height: 1.3rem;
}
.bottomBg {
  padding-right: 0.14rem;
  bottom: 0;
}
.mb2-top-bg {
  background-image: url("../../../assets/i/wap/voting/voteDetail01.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
.but-bg2 {
  background-image: url("../../../assets/i/wap/voting/mb2but.png");
  background-repeat: no-repeat;
  background-position: center;
}
.bg-size70 {
  background-size: 70%;
}
.bg-size {
  background-size: 75%;
}
.bg-size95 {
  background-size: 95%;
}
.mb3-index-bgColor {
  background-color: #723bee;
}
.mb3-detail-bg {
  background-color: #ffe562;
  color: #844813;
  border-radius: 1rem 0 0 1rem;
}
.but-bg3 {
  background-image: url("../../../assets/i/wap/voting/mb3Btn.png");
  background-repeat: no-repeat;
  background-position: center;
}
.mt-01 {
  margin-top: -0.1rem;
}
.minh560 {
  min-height: 14rem;
}
.fc844813 {
  color: #844813;
}
.bg-size40 {
  background-size: 40%;
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.box {
  width: 13rem;
  height: 13.65rem;
}
.boxContent {
  height: 11.4rem;
}
.flex-basis {
  flex-basis: 0;
}
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</style>